<template>
    <div style="width: 120px; height: 60px">
        <canvas v-draw ref="underCanvas" width=120 height=60 style="position: absolute; left: 0;top: 0;"></canvas>
        <canvas v-wipe ref="upCanvas" width=120 height=60 style="position: absolute; left: 0; top: 0;"></canvas>
    </div>
</template>

<script>
export default {
    name: "Prize",
    data() {
        return {
            under: {
                canvas: null,
                ctx: null
            },
            up: {
                canvas: null,
                ctx: null
            },
            width: null,
            height: null,
            options: {
                text: {
                    fontWeight: "bold",
                    fontSize: 16,
                    fontFamily: "Arial",
                    align: "center",
                    color: '#F60'
                },
                maskColor: "#cdced0",
                radius: 15,
                awards: ["一等奖", "二等奖", "三等奖", "谢谢！"]
            },
            award: ''
        }
    },
    mounted() {
        // 下层画布元素
        this.under.canvas = this.$refs.underCanvas;
        // 上层画布元素
        this.up.canvas = this.$refs.upCanvas;
        // 获取下层画布绘图上下文
        this.under.ctx = this.under.canvas.getContext("2d");
        // 获取上层画布绘图上下文
        this.up.ctx = this.up.canvas.getContext("2d");
        // 画布宽度
        this.width = this.up.canvas.width;
        // 画布高度
        this.height = this.up.canvas.height;
        this.init();
    },
    methods: {
        init() {
            // this.drawText();
            // this.drawMask();
            // this.addEvent();
        },
        drawText() {
            let ctx = this.under.ctx;
            let text = this.options.text;
            ctx.font = text.fontWeight + " " + text.fontSize + 'px ' + text.fontFamily;
            ctx.textAlign = text.align;
            ctx.fillStyle = text.color;
            this.award = this.options.awards[(Math.random() * this.options.awards.length) | 0]; //随机抽奖
            ctx.fillText(this.award, this.width / 2, this.height / 2 + text.fontSize / 2);
        },
        drawMask() {
            let ctx = this.up.ctx;
            ctx.fillStyle = this.options.maskColor;
            ctx.fillRect(0, 0, this.width, this.height);
            ctx.globalCompositeOperation = 'destination-out';
        },
        addEvent() {
            const that = this;
            let upCanvas = this.up.canvas;
            let callback1, callback2, callback3;
            upCanvas.addEventListener("mousedown", callback1 = function (evt) {
                upCanvas.addEventListener("mousemove", callback2 = function (evt) {
                    let x = evt.clientX - upCanvas.offsetLeft;
                    let y = evt.clientY - upCanvas.offsetTop;
                    let ctx = that.up.ctx;
                    let options = that.options;
                    ctx.beginPath();
                    let gradient = ctx.createRadialGradient(x, y, 0, x, y, options.radius);
                    // 其实这边的颜色值是可以随便写的，因为都会变成透明，重要的是透明度
                    gradient.addColorStop(0, "rgba(255, 255, 255, 0.2)");
                    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                    // 也可以不用渐变，直接用一种颜色，但渐变效果更好
                    ctx.fillStyle = gradient;
                    ctx.arc(x, y, options.radius, 0, Math.PI * 2, true);
                    ctx.fill();
                    ctx.closePath();
                    // 当刮开部分>80%的时候提醒刮奖结果，这个可以自己设置
                    if (that.result() > 0.8) {
                        alert(that.award);
                        upCanvas.removeEventListener("mousemove", callback2);
                    }
                }, false);
                document.addEventListener("mouseup", callback3 = function () {
                    upCanvas.removeEventListener("mousemove", callback2);
                    document.removeEventListener("mouseup", callback3);
                }, false);
            }, false);
        },
        result() {
            // 获取文字部分的宽、高
            let textWidth = this.options.text.fontSize * this.award.length;
            let textHeight = this.options.text.fontSize;
            // 获取文字部分的像素，这样可以根据刮开文字的部分占全部文字部分的百分比来提示结果，比如说在刮开80%的时候提示刮奖结果
            let imgData = this.up.ctx.getImageData(this.width / 2 - textWidth / 2, this.height / 2 - textHeight / 2, textWidth, textHeight);
            let pixelsArr = imgData.data;
            let transPixelsArr = [];
            for (let i = 0, j = pixelsArr.length; i < j; i += 4) {
                // a代表透明度
                let a = pixelsArr[i + 3];
                // 渐变的透明度＜=0.5，其实透明度的值是介于0~255之间的，0.5 * 255 = 127.5就是a的值
                if (a < 128) {
                    transPixelsArr.push(a);
                }
            }
            // 小于128的透明度的值的个数占总透明度的的个数的百分比
            return transPixelsArr.length / (pixelsArr.length / 4);
        }
    }
}
</script>

<style scoped>

</style>